<template>
  <el-scrollbar>
  <el-container style="min-height: 650px"  >
    <el-aside style="background: #bfbfbf;width:30%">
      <div>
        <el-affix :offset="120">
          <el-button type="primary">{{count}}</el-button>
        </el-affix>
        <el-affix :offset="150">
          <el-button type="danger">全部已读</el-button>
        </el-affix>
      </div>
    </el-aside>
    <el-main class="app" v-if="al">
      <el-timeline >
        <el-timeline-item
            v-for="comment in comments"
            :timestamp="comment.reply.createTime"
            placement="top"
            style="width: 600px"
        >
          <el-card>
            <el-avatar :src="comment.avatar"></el-avatar>
            <span style="font-size: larger;margin-right: 100px">{{comment.nickName}}</span>
            <router-link :to="comment.url"> <el-link type="primary" style="margin-right: 20px;font-size: 20px">文章：{{comment.articleTitle}}</el-link></router-link>
            <p style="margin-bottom: 30px;margin-top: 10px">回复时间：{{comment.reply.createTime}}</p>
            <p style="margin-bottom: 20px;color: #25a4bb">{{comment.reply.commentContent}}</p>
            <el-link
                type="warning"
                @click="bl=true,FZ(comment)"
            >回复</el-link>
            <el-popconfirm
                confirm-button-text="确定"
                cancel-button-text="取消"
                :icon="InfoFilled"
                icon-color="#626AEF"
                title="标记已读后不在显示该条回复！"
                @confirm="read(comment.reply.id)"
                @cancel=""
                style="margin-left: 160px"
            >
              <template #reference>
                <el-link type="error" >标记已读</el-link>
              </template>
            </el-popconfirm>
          </el-card>
        </el-timeline-item>
        <el-dialog v-model="bl">
            <el-input
                v-model="myreply.commentContent"
                :rows="2"
                type="textarea"
                placeholder="请写出你的回复"
            />
            <el-button type="primary" @click="reply()" style="margin-bottom: 20px">回复</el-button>
            <el-button type="primary" @click="cancel()" style="margin-bottom: 20px">取消</el-button>
        </el-dialog>
      </el-timeline>
    </el-main>

      <div v-else>
        你暂时没有回复
      </div>

  </el-container>
  </el-scrollbar>
</template>

<script setup>
import {ref, inject, onMounted, reactive} from "vue-demi";
import {ElMessage} from "element-plus";
import request from "@/utils/request";
import {InfoFilled} from "@element-plus/icons-vue/global";

const user = ref({})
const comments = ref([])
const al = ref(true)
let bl = ref(false)
const r = ref({})
const count = ref(0)
const myreply = reactive({
  userId:"",
  topicId:"",
  parentId:"",
  commentContent:"",
  replyUserId:""
})

onMounted(async ()=>{
  let result = await request.get("user/getuser")
  let data = result.data
  if(data.code===200){
    user.value = data.data
    console.log(data.msg)
  }else {
    console.log(data.msg)
  }
  await getReply()
})
//获取回复
const getReply = async ()=>{
  let result1 = await request.get("comment/getreply?userId="+user.value.id)
  let data1 = result1.data
  if(data1.code===200){
    comments.value = data1.data
    count.value = data1.msg
    console.log(data1.msg)
  }else {
    al.value = false
    console.log(data1.msg)
  }
}
const FZ = (comment)=>{
  myreply.topicId = comment.articleId
  r.value = comment.reply
  myreply.parentId = r.value.parentId
  myreply.replyUserId = r.value.id
  myreply.userId = user.value.id
  console.log(myreply)
}
//回复回复
const reply = async ()=>{

  let result1 = await request.post("comment/addcomment",myreply)
  let data1 = result1.data
  if(data1.code===200){
    open(data1.msg,"success")
    await getReply()
    cancel()
  }else {
    open(data1.msg,"error")
  }
}
//标记已读
const read =async (replyId)=>{
  let result1 = await request.get("comment/updatereply?id="+replyId)
  let data1 = result1.data
  if(data1.code===200){
    open(data1.msg,"success")
    await getReply()
  }else {
    open(data1.msg,"error")
  }
}
//取消回复
const cancel = ()=>{
  myreply.commentContent = "",
  bl.value = false
}
//弹出消息
const open = (msg,type)=>{
  ElMessage({
    message:msg,
    type:type
  })
}
</script>

<style scoped>
.app{
  position: relative;
  top: 0px;
  left: 0px;
  width: 400px;
  overflow : hidden;
  background: #25a4bb;
}
el-scrollbar{
  height: 100%;
}
el-scrollbar__wrap {
  overflow-x: hidden;
}
</style>